﻿@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>欢迎页</title>
    <link href="~/lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
    <link href="~/lib/ligerUI/skins/ligerui-icons.css" rel="stylesheet" type="text/css" />
    <link href="~/lib/ligerUI/skins/Gray/css/all.css" rel="stylesheet" type="text/css" />
    <link href="~/Content/css/common.css" rel="stylesheet" type="text/css" />
    <script src="~/lib/jquery/jquery-1.9.0.min.js" type="text/javascript"></script>
    <script src="~/lib/ligerUI/js/ligerui.all.js"></script>
    <script src="~/Scripts/common.js"></script>
    <script src="~/Scripts/echarts.min.js" type="text/javascript"></script>
    <link type="text/css" rel="stylesheet" href="/content/css/desktop.css" />
</head>
<body scroll="no">
    <div class="div1">
        <div data-val="month" class="tab-date">月</div>
        <div data-val="year" class="tab-date">年</div>
    </div>
    <div class="div2">
        <ul class="marginl50">
            <li class="tit1"><label id="lblAeAddCount">0</label></li>
            <li class="tit2">不良事件 新增</li>
        </ul>
        <ul class="marginl125">
            <li class="tit1"><label id="lblAeReviewCount">0</label></li>
            <li class="tit2">不良事件 审核</li>
        </ul>
        <ul class="marginl125">
            <li class="tit1">0</li>
            <li class="tit2">质量检测 (次)</li>
        </ul>
        <ul class="marginl125">
            <li class="tit1">0</li>
            <li class="tit2">质量检测 需整改</li>
        </ul>
    </div>
    <div class="div3">
        实时数据
    </div>
    <div class="div4 ">
        <ul data-val="bed" class="ul1">
            <li><span>0</span></li>
            <li><label>床位数</label></li>
        </ul>
        <ul data-val="patient" class="ul2 ulselected">
            <li><span>0</span></li>
            <li><label>住院患者数</label></li>
        </ul>
        <ul data-val="bednurse" class="ul3">
            <li><span>0</span></li>
            <li><label>床护比</label></li>
        </ul>
        <ul data-val="askforleave" class="ul4">
            <li><span>0</span></li>
            <li><label>护士请假</label></li>
        </ul>
    </div>
    <div class="div5" style="width:100%;">
        <div id="mainecharts" style="height:260px;"></div>
    </div>
    <script type="text/javascript">
        var aeStatus;
        var dateType;
        $(document).ready(function () {
            $(".div1 div").on("click", function () {
                $(this).siblings().removeClass("selected");
                $(this).addClass("selected");
                dateType = $(this).attr("data-val");

                $.ajax({
                    url: "/Home/GetAdverseEventData",
                    type: "post",
                    data: { dateType: $(this).attr("data-val") },
                    success: function (r) {
                        var r = $.parseJSON(r);
                        if (r.Result == 1) {
                            $("#lblAeAddCount").text(r.Body.AddCount);
                            $("#lblAeReviewCount").text(r.Body.ReviewCount);
                            aeStatus = r.Body.Status;
                        }
                        else if (r.Result == 0) {
                            $.ligerDialog.error(r.Body);
                        }
                        else {
                            $.ligerDialog.error("程序错误");
                        }
                    },
                    error: function () {
                        $.ligerDialog.error("程序错误");
                    }
                });
            });

            $(".div2 ul").on("click", function () {
                if ($(this).find("#lblAeAddCount").length > 0) {
                    $(".menulink", window.parent.document.getElementById("accordion1")).each(function () {
                        if ($(this).attr("taburl").indexOf("AdverseEventReview/Index") != -1) {
                            f_addTab($(this).attr("tabid"), $(this).attr("tabtext"), $(this).attr("taburl") + "?status=-1&dateType=" + dateType);
                            return false;
                        }
                    });
                }

                if ($(this).find("#lblAeReviewCount").length > 0) {
                    $(".menulink", window.parent.document.getElementById("accordion1")).each(function () {
                        if ($(this).attr("taburl").indexOf("AdverseEventReview/Index") != -1) {
                            f_addTab($(this).attr("tabid"), $(this).attr("tabtext"), $(this).attr("taburl") + "?status=" + aeStatus + "&dateType=" + dateType);
                            return false;
                        }
                    });
                }
            });

            $(".div4 ul").on("click", function () {
                $(this).siblings().removeClass("ulselected");
                $(this).addClass("ulselected");
                switch ($(this).attr("data-val")) {
                    case "bed":
                        break;
                    case "patient":

                        break;
                    case "bednurse":

                        break;
                    case "askforleave":

                        break;
                    default: break;
                }
            });

            $(".div1 div").first().click();
            EChartsSearch();
        });

        //查询ECharts
        function EChartsSearch(queryData) {
            $.ajax({
                url: "/Home/EChartsSearch?ram" + Math.random(),
                type: "Post",
                data: queryData,
                success: function (result) {
                    result = $.parseJSON(result);
                    if (result.Code == 1) {
                        var data = result.D;
                        var legendData = data.legendData;
                        var seriesData = [];
                        for (var i = 0; i < legendData.length; i++) {
                            var tempData = [];
                            for (var ii = 0; ii < data.seriesData.length; ii++) {
                                if (legendData[i] == data.seriesData[ii].name) {
                                    tempData.push(data.seriesData[ii].value);
                                }
                            }
                            seriesData.push(tempData);
                        }
                        var title = data.title;
                        var xAxisData = data.xAxisData;
                        var xAxisTitle = data.xAxisTitle;
                        var yAxisTitle = data.yAxisTitle;

                        SetBar(title, xAxisTitle, yAxisTitle, legendData, seriesData, xAxisData);

                    } else {
                        $.ligerDialog.error(result.M);
                    }
                },
                error: function () {
                    $.ligerDialog.error("程序错误");
                }
            });
        }

        ///柱形图
        function SetBar(title, xAxisTitle, yAxisTitle, legendData, seriesData, xAxisData) {
            var count = xAxisData.length;
            var girdWidth = $(window).width() - 125;
            var zoomEnd = 100;
            if (girdWidth / 20 < count) {
                zoomEnd = Math.floor(girdWidth / 25 / count * 100);
            }

            var extraHeight = $(window).height() - 490;
            if (extraHeight > 250) {
                extraHeight = 250;
            }
            var yAxisMax = Math.max.apply(null, seriesData[0]);
            var gridHeight = 140;
            var splitNumber = 5;
            var interval = Math.ceil(yAxisMax / splitNumber);
            var tempInterval = interval;

            if (extraHeight > 0) {
                gridHeight += extraHeight;
                splitNumber += Math.floor(extraHeight / 50);
                $("#mainecharts").height($("#mainecharts").height() + extraHeight);
            }
            for (var i = 1; i <= 1000; i++) {
                if (tempInterval % Math.pow(10, interval.toString().length - 1) == 0) {
                    break;
                }
                tempInterval++;
            }
            yAxisMax = splitNumber * tempInterval;

            var series = [];
            for (var i = 0; i < legendData.length; i++) {
                series.push({
                    name: legendData[i],
                    type: 'bar',
                    barWidth: 10,
                    data: seriesData[i]
                })
            }
            var myChart = echarts.init(document.getElementById('mainecharts'));
            option = {
                color: ['#88D3E2'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    y: 40,
                    y2: 100,
                    x: 40,
                    x2: 80,
                    height: gridHeight
                },
                xAxis: [
                    {
                        boundaryGap: true,
                        axisLabel: {
                            interval: 0,
                            rotate: -40
                        },
                        type: 'category',
                        data: xAxisData,
                        axisTick: {
                            alignWithLabel: true
                        },
                        name: xAxisTitle
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: yAxisTitle,
                        min: 0,
                        max: yAxisMax,
                        splitNumber: splitNumber
                    }
                ],
                series: series,
                dataZoom: [//给x轴设置滚动条
                   {
                       start: 0,//默认为0
                       end: zoomEnd,//默认为100
                       type: 'slider',
                       show: zoomEnd == 100 ? false : true,
                       xAxisIndex: [0],
                       handleSize: 0,//滑动条的 左右2个滑动条的大小
                       height: 10,//组件高度
                       left: '10', //左边的距离
                       right: '20',//右边的距离
                       bottom: '0',//下边的距离
                       borderColor: "#fff",
                       fillerColor: '#6698A2',
                       borderRadius: 5,
                       backgroundColor: '#D4E3E6',//两边未选中的滑动条区域的颜色
                       showDataShadow: false,//是否显示数据阴影 默认auto
                       showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
                       realtime: true, //是否实时更新
                       filterMode: 'filter'
                   }
                ]
            };
            myChart.setOption(option);
        }
    </script>
</body>
</html>